<template>
    <div>
        <h3>房型列表</h3>
        <input type="button" value="批量删除" class="btn btn-primary" @click="delAll">
        <input type="button" value="批量发布" class="btn btn-primary" @click="UpdateAll(1)">
        <input type="button" value="批量不发布" class="btn btn-primary" @click="UpdateAll(0)">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @change="checkAll"></td>
                    <td>序号</td>
                    <td>房型名称</td>
                    <td>房型图片</td>
                    <td>房型状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.houseTypeId">
                    <td><input type="checkbox" v-model="ids" :value="item.houseTypeId" @change="checkOne"></td>
                    <td>{{ item.houseTypeId }}</td>
                    <td>{{ item.houseTypeName }}</td>
                    <td>
                        <img :src="item.photo" width="100" height="100">
                    </td>
                    <td>{{ item.state == 1 ? "发布" : "不发布" }}</td>
                    <td>
                        <input type="button" value="修改" class="btn btn-primary">
                        <input type="button" value="删除" class="btn btn-danger">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, registerRuntimeCompiler } from 'vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
onMounted(() => {
    Show();
})
//批量发布未发布
const UpdateAll = (state: any) => {
    if (ids.value.length == 0) {
        alert('必选一项')
        return
    }
    let f = confirm('请问修改状态吗?')
    if (f) {
        axios({
            url: '/api/HouseType/UpdateAll',
            method: 'put',
            params: {
                ids: ids.value.toString(),
                state: state
            }
        })
            .then((res) => {
                console.log(res);
                if (res.data > 0) {
                    alert('修改成功')
                    Show();
                }
                else {
                    alert('修改失败')
                    return;
                }
            })
            .catch((err) => {
                console.log(err);

            })
    }
}
//批量删除
const delAll = () => {
    //1.友好提示(必选一项,要不要删)
    if (ids.value.length == 0) {
        alert('必选一项')
        return;
    }
    let f = confirm('请问确定要删除吗?')
    if (f) {
        axios({
            url: '/api/HouseType/DelAll',
            method: 'put',
            params: {
                ids: ids.value.toString()
            }
        })
            .then((res) => {
                console.log(res);
                if (res.data > 0) {
                    alert('删除成功')
                    Show();
                }
                else {
                    alert('删除失败')
                    return;
                }
            })
            .catch((err) => {
                console.log(err);

            })
    }
    //2.发送请求
    //3.刷新列表
}
//全选全不选变量
let checked: any = ref(false);
let ids: any = ref([]);
//全选全不选
const checkAll = () => {
    console.log(checked.value);
    if (checked.value) {
        ids.value = data.list.map((item: any) => {
            return item.houseTypeId;
        })
    }
    else {
        ids.value = [];
    }
}
const checkOne = () => {
    if (ids.value.length == data.list.length) {
        checked.value = true
    }
    else {
        checked.value = false
    }
}
//参数
let type: any = reactive({
    pageindex: 1,
    pagesize: 3,
    housetypename: '',
    area1: '',
    area2: ''
})
//后端
let data: any = reactive({
    listcount: '',
    pagecount: '',
    list: []
})
const Show = () => {
    axios({
        url: '/api/HouseType/GetHouseTypeList',
        method: 'get',
        params: type
    })
        .then((res) => {
            console.log(res);
            Object.assign(data, res.data)
        })
        .catch((err) => {
            console.log(err);

        })
}
</script>

<style scoped></style>